<template>
  <div class="smallVideo">
    <div class="cover">
      <span>{{ userName }}</span>
    </div>
    <video ref="video" autoplay v-show="camera" :muted="tools.isSelf(this.id)"></video>
    <videoCover :id="id" type="small" v-show="!camera"></videoCover>
  </div>
</template>

<script>
import videoCover from './videoCover'
export default {
  name: 'smallVideo',
  data () {
    return {
    }
  },
  props: {
    // id
    id: {
      type: Number
    },
    // 摄像头
    camera: {
      type: Boolean
    },
    // 媒体流
    stream: {
      type: MediaStream
    }
  },
  components: {
    videoCover
  },
  computed: {
    userName () {
      if (this.id) {
        return this.$store.state.chatInformation.userList[this.id].user_name
      } else {
        return ''
      }
    }
  },
  watch: {
    // 监听stream
    stream: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val) {
          this.$nextTick(() => {
            if (this.$refs.video) {
              this.$refs.video.srcObject = val
              this.$refs.video.onloadedmetadata = () => {
                this.$refs.video.play()
              }
              this.$refs.video.addEventListener('pause', () => {
                if (this.$refs.video) {
                  this.$refs.video.play()
                }
              })
              this.$refs.video.addEventListener('ended', () => {

              }, false)
            }
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.smallVideo {
  width: 300px;
  height: 184px;
  position: absolute;
  right: 60px;
  bottom: 60px;

  .cover {
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;

    span {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 32px;
      line-height: 32px;
      padding-right: 12px;
      color: #fff;
      background-color: rgba(12,23,47,0.60);
      font-size: 14px;
    }
  }

  video {
    width: 100%;
    height: 100%;
  }
}
</style>
